<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒险岛官方网站(MapleStory)-爱我就来冒险吧！</title>
    <style>
    *{
        margin:0px;
        padding: 0px;
        list-style: none;
        text-decoration: none;
    }
    #headwrap{
        width:100%;
    }
    #navlogo{
       /* 用百分比会造成右侧DIV 跟随移动 */
        background-color: #fff;
        margin: 0 auto;
     
    }
    #navlogo::after{
        content: "";
        display: block;
        clear: both;
    }
    #navlogo .logo{
        background: url("image/logo.png") no-repeat;
        width: 175px; /* 有背景图需要指出div大小 */
        background-size:300px 40px;
        margin-top: 7px;
        margin-left: 25px;
        float: left;
    }
    #navlogo .logo a{
        display: block;
        height: 45px;
        text-indent: -9999px;
    }
    #navlogo .server{
        float: right;
        margin-top: 10px;
        margin-right: 30px;
    }
   #navlogo .server li{
       float:left;
       font-size: 15px;
       font-weight: 600;
       margin-right: 18px;
       padding-top:15px;
   }
   #navlogo .server li a{
    color: #494949;
   }
   #navlogo .server li a:hover{
       color: red;
   }
   #contentwrap{
       width: 1366px;
       background: url("image/bgpic.jpg") no-repeat 50% 0;
       position: relative;
      
   }
   #contentwrap #header{
       margin: 0 auto;
       width: 1200px;
       height: 350px;
     
       position: relative;
   }
   #header .malpic{
       position: absolute;
     
   }
   #header .malpic p{
       font-size: 13px;
   }
   #header .navbar{
       position: absolute;
    ;
    background-position: 0 2px;
       left: 300px;
   }
   #header ul{
       float: right;
     
   }
   #header ul li{
       float: left;
       color: #fff;
       font-size: 16px;
       font-weight: 600;
       font-family: 'Microsoft Yahei';
       margin-right: 60px;
       margin-top: 25px;
   }
   #header ul li:last-child{
       margin-right: 0;
   }
   #header ul i{
        font: 11px "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",arial,tahoma,sans-serif;
        color: #979797;
        line-height: 14px;
        font-style: normal;
        font-variant: small-caps;
        display: block;
        margin-top: -2px;
        text-transform:uppercase;
        font-size: 1px;
        text-align: center;
   }
   #contentwrap .newslist{
       width: 100%;
       height: 350px;
       position: absolute;
       background: url("image/nav_bg2.png") no-repeat;
       margin-top: -350px;
       transition: 0.5s;
     
   }
   .newslist li{
       color:#fff;
       font-size: 12px;
       width: 100px;
       text-align: center;
       margin-bottom: 5px;
   }
  
   .download{
    margin-left: 495px;
    margin-top:80px;
    float: left;
   }
   .news{
    float: left;
    margin-left: 35px;
    margin-top:80px;
   }
   .info{
    float: left;
    margin-left: 22px;
    margin-top:80px;
   }
   .pay{
    float: left;
    margin-left: 25px;
    margin-top:80px;
   }
   .interaction{
    float: left;
    margin-left: 22px;
    margin-top:80px;
   }
   .service{
    float: left;
    margin-left: 40px;
    margin-top:80px;
   }
   #contentwrap #snews{
    margin: 0 auto;
    width: 1200px;
    height: 310px;
    background: url("image/newsbg.png") no-repeat;
   }
   #snews .newsleft{
       background: url("image/mbtn_bg.png");
       width: 254px;
       height: 335px;
       float: left;
       margin-top: -45px;
       margin-left: 20px;
       position: relative;
       cursor: pointer;
   }
   .newsleft .down{
       background: url("image/download_bg.png");
       width:213px;
       height: 213px;
       left: 20px;
       position: absolute;
       top: -65px;
   }
   .newsleft .down div{
       width:213px;
       height: 213px;
       text-indent: -999px;
       background: url("image/download_btn.png");
       transition: 1s;
   }
   .newsleft .downlist{
       width: 206px;
       height: 188px;
       background: url("image/qlink.png");
       position: absolute;
       top:130px;
       left:20px;
   }
    .downlist  li{
    width: 208px;
    height: 32px;
   }
   .downlist  li img{
       display: none;
   }
   .downlist  li:hover img{
       display: block;
   }
   .downlist  li em{
       text-indent: -999px;
       display: block;
   }


   #newscenter{
       width: 520px;
       height:280px;
      float: left;
      margin-left: 40px;
      margin-top: 10px;
   } 
   
   .centertitle ul{
    width: 515px;
       height: 28px;
       margin-top: 10px;
       border-bottom: 2px solid #ffd118;
       cursor: pointer;

   }
   .centertitle li{
    float: left;
    width: 108px;
    background-color: rgb(16,21,31);
    margin-right: 8px;
    text-align: center;
    line-height: 28px;
    display: block;
    font-size: 14px;
    color: #8c9ca9;
    font-family: 'Microsoft Yahei';
    border-radius: 5px;
   }
   .centertitle em{
       float: left;
       text-indent: -999px;
       background: url("image/news_more.png") no-repeat;
       width: 20px;
       height: 20px;
       margin-left: 20px;
       margin-top: 3px;
   }
   .centertitle .lion{
       line-height: 31px;
       width: 105px;
       background: url("image/news-tab_hover.png") no-repeat;
       background-color: rgb(34,43,64);
   }
   .centerinfo{
       width: 510px;
       height: 240px;
       float: left;
       font-size: 12px;
   }
   .centerinfo li{
       margin-top: 8px;
       width: 510px;
     
   }
   .centerinfo span{
    color:#ffab00
   }
   .centerinfo p{
       color: #fc3b3b;
       margin-left: 12px;
       font-weight:bold;
       display: inline;
   }
   .centerinfo em{
       color: #fff; 
       float: right;
       font-style: normal;
   }
   .centerinfo .fontcolor1{
       color:#ffd118;
   }
   .centerinfo .fontcolor2{
       color:#fff;
   }
   #newsright{
       float: left;
       width: 312px;
       height: 263px;
       margin-top: 20px;
       position: relative;
       cursor: pointer;
       overflow: hidden;
       
   }
   #newsright ul{
       position: absolute;
       width: 300%;
       transition: 0.8s;
   }
   #newsright li {
       float: left;
   }
   #newsright div span{
       position:absolute;
       top:120px;
       width: 30px;
       height: 30px;
       display:block;
       line-height: 30px;
       color: #fff;
       font-size: 20px;
       text-align: center;
       background:rgba(0,0,0,.3);
       border-radius: 50%;
       display: none;
   } 
   #newsright div span:hover{
    background:rgba(0,0,0,.6);
   }
   #newsright div .rightspan{
       right: 0;
   }
    #newsright:hover span{
        display: block;
    }
    #shoplist{
    margin-left:83px;
    width: 1160px;
 
    }
    #shoplist::after{
        content: "";
        display: block;
        clear: both;
    }
    #shoplist .shopleft{
        float: left;
    }
  
    .shopleft .slone{
    position: relative;
    width: 258px;
    height:216px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 6px;
    }
    .shopleft .slonepic{
        position: absolute;
    }
    .shopleft .slonese{
        position: absolute;
        left:35px;
        bottom: 10px;
    }
    .shopleft .slonese select{
        width: 180px;
        height: 25px;
        color: #666;
        border: solid 1px #e2e2e2;
        line-height: 25px;
    }
    .sltwo{
        width: 258px;
        height: 380px;
        border: 1px rgba(0,0,0,.3) solid;
        border-radius: 6px;
        margin-top: 20px;
    }
    .sltwo h3{
        background: url("image/gameService-hd.jpg") no-repeat;
        height: 41px;
        text-indent: -999px;
        border-bottom: dotted 1px #c9c9c9;
        padding: 8px 0;
        margin: 10px;
    }
    .sltwo p{
        font-size: 12px;
        line-height: 22px;
         color: #696969;
         padding: 0px 0 7px 32px;
    }
    .sltwo ul{
        margin-left: 22px;
    }
    .sltwo li{
        width: 211px;
        height: 25px;
        margin-bottom:8px;
        border: 1px red solid;

    }
    .sltwo .q1{
        background: url("image/gameServicelink.png");
    }
    .sltwo .q2{
        background: url("image/gameServicelink.png") 0 -33px;
    }
    .sltwo .q3{
        background: url("image/gameServicelink.png") 0 -66px;
    }
    .sltwo .q4{
        background: url("image/gameServicelink.png") 0 -132px;
    }
    .sltwo em{
        display: block;
        text-indent:-9999px;
    }
    .sltwo .q1:hover {
        background: url("image/gameServicelink1_hover.png");
    }
    .sltwo .q2:hover {
        background: url("image/gameServicelink2_hover.png");
    }
    .sltwo .q3:hover {
        background: url("image/gameServicelink3_hover.png");
    }
    .sltwo .q4:hover {
        background: url("image/gameServicelink4_hover.png");
    }
    .slthree{
        width:256px;
        height: 222px;
        border: 1px rgba(0,0,0,.3) solid;
        border-radius: 9px;
        margin-top: 20px;
        position: relative;
    }
    .slthree div  li{
        width: 128px;
        height: 48px;
        float: left;
        line-height: 48px;
        text-align: center;
        font-size: 12px;
        color: #a4a4a4; 
        cursor: pointer;
    }
    .wwclick{
        color:#fff;
        background: url("image/weixin-hd.png") no-repeat ;
    }
    .wwclick1{
        color:#fff;
        background: url("image/weixin-hd.png") no-repeat 0px -51px;
    }  
    .wwclick::after{
        display:block;
        content: "";
        clear: both;
    }
    .wwclick1::after{
        display:block;
        content: "";
        clear: both;
    }
    .wwpic li{
        position: absolute;
        top: 50px;
        left: 48px;
        opacity: 0;
        transition: 0.5s;
    }
    .wwpic li:first-child{
        opacity: 1;
    }
    .shopcenter{
        float: left;
        margin-left: 20px;
    }
    .shopcenter .scone{
        width: 615px;
        height: 215px;
        border: 1px rgba(0,0,0,.3) solid;
        border-radius: 9px;
        background: url("image/shopping_bg.png") no-repeat;
        position: relative;
       
}
.scone::after{
    display: block;
    clear: both;
    content: "";
}
.scone>img{
    float:right;
    margin-right: 55px;
    margin-top: 7px;
    cursor: pointer;
}

.scone span
{
    width: 28px;
    height: 28px;
    position: absolute;
    text-indent: -9999px;
    cursor: pointer;
}
.spannleft{
    background: url("image/arrow2.png") no-repeat;
    top:90px;
    left:5px;
}
.spanright{
    background: url("image/arrow2.png") no-repeat -28px  0;
    top:90px;
    right:5px;
}
.scone .ulwrap{
    width: 540px;
    height: 165px;
    position: absolute;
    top: 48px;
    left: 44px;
    cursor: pointer;
    overflow: hidden;
    
}
.scone ul{
    width:2704px;
    transition: 0.8s; 
  /*   border: 1px red solid; */
   
}
.scone ul li{
    float: left;
    width: 110px;
    height: 165px;
    margin-right: 28px;
    background: url("image/pic1_bg.png") no-repeat 
}
.scone ul li:last-child{
    margin-right:0;
}
.scone ul li img{
    margin-top: 12px;
    margin-left: 5px;
}
.ulwrap div{
    background:url("image/pic1-item1.png") no-repeat 5px 5px;
}
.ulwrap div p{
    color: #000;
    font-size: 12px;
    line-height: 20px;
    margin-top: 12px;
    padding-left: 20px;
    white-space: nowrap;
    background:url("image/pic1-item2.png") no-repeat 5px 24px;
}
.scthree{
    width: 612px;
    position: relative;
    top: 20px;
    overflow: hidden;
}
.scthree:hover span{
    display: block;
}
.scthree span{
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,.3);
    color: #fff;
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 55px;
    border-radius: 50%;
    font-size: 24px;
    display: none;
    cursor: pointer;
}
.scthree span:hover{
    background-color: rgba(0,0,0,.6);
}
.scthree .scthreeleft{
    left: 10px;
}

.scthree .scthreeright{
    right: 10px;
}
.scthree ul{
    width: 2448px;
    transition: 0.8s;
    
}
.scthree ul li{
    float: left;
}
.scfour{
    width: 613px;
    height: 213px;
    margin-top:38px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 9px;
    background: url("image/playWorld_bg.png") no-repeat;
    
}
.scfour ul{
    width: 565px;
    margin:auto;
    margin-top:45px;
}
.scfour ul span{
    color:#fc3b3b;
}
.scfour ul li{
    color: #646464;
    font-size: 12px;
    margin-bottom: 5px;
    font-style: normal;
}
.scfour ul li p{
    display: inline;
    margin-left: 5px;
    font-weight: 600px;
}
.scfour ul li em{
    float:right;
}
.scfive{
    width: 613px;
    height: 220px;
    background: url("image/media_bg.png") no-repeat;
    margin-top: 20px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 9px;
    
}
.scfive span{
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,.3);
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-top: 100px;
    float: left;
    color:#e2e2e2;
    cursor: pointer;
}
.scfive span::selection{
    background: none;
}
.scfive div{
    margin: 0 auto;
    margin-top:40px;
    width: 530px;
    overflow: hidden;
    cursor: pointer;
}
.scfive ul{
    width: 1060px;
}
.scfive ul li{
    float: left;
}
#shopright{
    float: right;
  
}
#shopright .srone{
    width: 256px;
    cursor: pointer;
}
 .srone li{
     position: relative;
    width: 256px;
    margin-bottom: 20px;
    height: 94px;
}
 .srone .one{
    background: url("image/rlink.png") no-repeat;
}
.srone li:hover em{
    position: absolute;
    top:16px;
    right: 2px;
    width:76px;
    height: 76px;
    transition: 1s;
    background: url("image/rlink_hover.png") no-repeat;
}

.srone .two{
    background: url("image/rlink.png") no-repeat 0 -94px;

}
.srone .three{
    background: url("image/rlink.png") no-repeat 0 -188px;

}
.srtwo{
    position: relative;
    width: 254px;
    height: 280px;
    background: url("image/master_bg.png") no-repeat;
}
.srtwo ul{
    position: absolute;
    top:45px;
    left:20px;
}
.srtwo ul img{
    width:212px;
    height: 125px;
    margin-top: 2px;
    margin-left: 2px;
  
}
.srtwo li{
    position: relative;
    width: 216px;
    height: 130px;
    background: url("image/master-pic-bg.png")
}
.srtwo p{
    padding: 3px 0;
    color: #000;
    line-height: 20px;
    font-size: 12px;
    padding-left: 45px;
    background: url("image/master-icon.png") no-repeat 28px 8px;
}
.srtwo p:last-child{
    border-bottom:dotted 1px #9b9b9b;
}
.srtwo>div{
    position: absolute;
    left:25px;
    top:240px;
   width: 211px;
    height: 25px; 
    background: url("image/master-btn.png")
}
.srtwo>div:hover {
    background: url("image/master-btn-hover.png");
}
.srthree{
    margin-top: 20px;
    width: 254px;
    height: 200px;
    border: 1px rgba(0,0,0,.3) solid;
    border-radius: 9px;
    background: url("image/cooperation_bg.png")
}
.srthree>div{

    margin-top: 50px;
    width:235px;
    margin:50px auto 0 auto;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.srthree>div>div:hover{
    margin-left:0px;
    transition: 0.8s;

}
.srthree>div>div{
    margin-left: -87px;
    transition: 0.8s;
}

.srthree div::after{
    content: "";
    display: block;
    clear: both;
}
.srthree ul{
    position: absolute;
    top:0;
    left: 90px;
    cursor: pointer;
}
.srthree ul li{
    width: 126px;
    height: 30px;
    margin-bottom: 7px;
    text-align: center;
    line-height: 30px;
    color:#fff;
    font-size: 15px;
    background: url("image/cooperation_btn.png");
    transition: 0.5s;
}
.srthree ul li:hover{
    transition: 0.5s;
    background: url("image/cooperation_btn.png") 0 -30px;
}
#footer{
        width:100%;
        height: 70px;
        position: relative;
        overflow: hidden; 
        margin-top: 10px;
    }
   #footer ul{
        width: calc(2220*2px);
        height: 100%;
        position: absolute;
    }
   #footer li{
        float: left;
    }
   </style>
</head>
<body>
    <div id="headwrap">
        <div id="navlogo">
            <div class="logo">
                <a  href="http://mxd.sdo.com/web6/home/index.asp" target="_blank" >盛大logo</a>
            </div>
            <div class="server">
                <ul>
                    <li><a  href="http://mxd.sdo.com/web6/home/index.asp" target="_blank" >充值</a></li>
                    <li>|</li>
                    <li><a  href="http://mxd.sdo.com/web6/home/index.asp">彩虹客户</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="contentwrap">
        <div class="newslist">
            <div class="download">
                <ul>
                    <li>客户端下载</li>
                    <li>补丁下载</li>
                    <li>游戏内置视频下载</li>
                    <li>S档案馆</li>
                </ul>
            </div>
            <div class="news">
                <ul>
                    <li>综合新闻</li>
                    <li>热门活动</li>
                    <li>商品促销</li>
                    <li>最新公告</li>
                </ul>
            </div>
            <div class="info">
                    <ul>
                        <li>游戏介绍</li>
                        <li>新手上路</li>
                        <li>新手成长</li>
                        <li>高手进阶</li>
                        <li>历史版本</li>
                    </ul>
            </div>
            <div class="pay">
                        <ul>
                            <li>我要充值</li>
                            <li>充值热点问题</li>
                            <li>冒险卷兑换</li>
                        </ul>
            </div>
            <div class="interaction">
                    <ul>
                        <li>游戏论坛</li>
                        <li>新浪微博</li>
                        <li>官方微信</li>
                    </ul>
            </div>
            <div class="service">
                    <ul>
                        <li>我的客服</li>
                        <li>账号保护</li>
                        <li>密码找回</li>
                        <li>资料修改</li>
                        <li>常见问题</li>
                        <li>用户协议</li>
                        <li>心享服务</li>
                    </ul>
        </div>
        </div>
        <div id="header">
            <div class="malpic">
                <img src="image/malpic.png"/>
                <p>适龄提示：适合12岁以上用户</p>
            </div>
            <div class="navbar">
                <ul>
                    <li>官方首页<i>HOME</i></li>
                    <li>下载中心<i>DOWNLOAD</i></li>
                    <li>岛内新闻<i>NEWS</i></li>
                    <li>游戏资料<i>INFO</i></li>
                    <li>充值专用<i>PAY</i></li>
                    <li>玩家互动<i>interaction</i></li>
                    <li>彩虹客户<i>SERVICE</i></li>
                </ul>
            </div>
        </div>
        <div id="snews">    
            <div class="newsleft">
                <div class="down">
                    <div>下载</div>
                </div>
                <div class="downlist">
                        <ul>
                                <li><img  src="image/qlink1_hover.png"/><em>账号注册</em></li>
                                <li><img   src="image/qlink2_hover.png"/><em>领奖专区</em></li>
                                <li><img   src="image/qlink3_hover.png"/><em>购卡充值</em></li>
                                <li><img   src="image/qlink4_hover.png"/><em>账号保护</em></li>
                                <li><img   src="image/qlink5_hover.png"/><em>密码找回</em></li>
                                <li><img  src="image/qlink6_hover .png"/><em>游戏论坛</em></li>
                            </ul>
                </div>
                    
            </div>
            <div id="newscenter">
                <div class="centertitle">
                    <ul>
                        <li class="lion">综合新闻</li>
                        <li>热门活动</li>
                        <li >商品促销</li>
                        <li>最新活动</li>
                        <em>更多新闻</em>
                    </ul>
                </div>
                <div class="centerinfo">
                    <ul>
                        <li><span>[活动]</span><p>冒险岛冬季新版本 系统全新上架角色删除功能</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>挑战堆王冠 收集星之女神留下的闪亮王冠</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>平衡汪军团出击 一起维持冒险岛世界的和平美好</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>品克缤敲敲乐更新 真红装备饰品A级潜能全面提升</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>转蛋万花筒更新 冬季暖心告白汪星人陪伴你左右</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">初冬季节 豪华羊绒套装与萌宠包围的舒适暖意</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">怪怪卡牌突破包更新 黑暗幽灵系列怪怪神秘登场</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">晶莹剔透的冬日雪花礼物袋 温情回归游戏商城</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor2" >周日冒险岛福利开启 符文经验值与持续时间双倍</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor2">更新领星星 登录游戏就能领取500颗星星福利</p><em>2018/12/5</em></li>
                    </ul>
                    <ul style="display:none">
                        <li><span>[活动]</span><p>冒险岛冬季新版本 系统全新上架角色删除功能</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>挑战堆王冠 收集星之女神留下的闪亮王冠</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>平衡汪军团出击 一起维持冒险岛世界的和平美好</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>品克缤敲敲乐更新 真红装备饰品A级潜能全面提升</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>转蛋万花筒更新 冬季暖心告白汪星人陪伴你左右</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p class="fontcolor2">周日冒险岛福利开启 符文经验值与持续时间双倍</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p class="fontcolor2">更新领星星 登录游戏就能领取500颗星星福利</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>冒险岛快闪店最后一站 武汉网鱼网咖派对开启倒计时！</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>毛莫的灵魂争夺战第三季 美女与野兽的爱情对弈</p><em>2018/12/5</em></li>
                        <li><span>[活动]</span><p>转蛋万花筒更新 为你寻找那片冬日里的幸运彩虹</p><em>2018/12/5</em></li>
                    </ul>
                    <ul style="display:none">
                        <li><span>[商品]</span><p class="fontcolor1">初冬季节 豪华羊绒套装与萌宠包围的舒适暖意</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">晶莹剔透的冬日雪花礼物袋 温情回归游戏商城</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">平衡汪军团出击 一起维持冒险岛世界的和平美好</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">怪怪卡牌突破包更新 黑暗幽灵系列怪怪神秘登场</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">冒险岛郊游日出发 带上骑宠和小伙伴一起去旅行</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">伤害皮肤万花筒突破包更新 当恶魔遇上小公主</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">感恩节特别活动 丰收时节和亲友一起举办盛宴派对！</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">怪怪卡牌突破包更新第二弹 挑战黑暗大魔王</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span> <p class="fontcolor2">周日冒险岛福利开启 符文经验值与持续时间双倍</p><em>2018/12/5</em></li>
                        <li><span>[商品]</span><p class="fontcolor1">求爱大作战最后一天 爱情传递篮&恋恋草莓19点抢购！</p><em>2018/12/5</em></li>
                    </ul>
                    <ul style="display:none">
                        <li><span>[公告]</span><p class="fontcolor2">v157更新 12月5日上午全区服停机维护公告(已完成)</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">官论冒险月刊201812期 千里黄云白日曛</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">V156复古世界版本内容满意度问卷调查</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">感恩节感谢有你陪伴 管管暖心感恩祝福送给你</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">双11红心巧克力买10送1表爱意活动发奖公告</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">T144测试开放及完整客户端下载公告（附带补丁）</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">11月13日全区全服分频道维护公告（已完成）</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">11月2日二区停机维护公告</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2" >官论冒险月刊201811期 黃叶丹枫</p><em>2018/12/5</em></li>
                        <li><span>[公告]</span><p class="fontcolor2">10月30日全区全服分频道维护公告（已完成）</p><em>2018/12/5</em></li>
                    </ul>
                </div>
            </div>
            <div id="newsright">
                <ul>
                    <li><img src="image/loop1.png"/></li>
                    <li><img src="image/loop2.png"/></li>
                    <li><img src="image/loop3.png"/></li>
                </ul>
                <div>
                    <span><</span>
                    <span class="rightspan">></span>
                </div>
            </div>
        </div>
        <div id="shoplist">
            <div class="shopleft">
                <div class="slone">
                    <div class="slonepic"><img src="image/slonepic.png"/></div>
                    <div class="slonese">
                        <select>
                            <option>查看更多历史版本</option>
                            <option>V156“复古世界”</option>
                            <option>V155“拍卖场”</option>
                            <option>V154“莫奈得”</option>
                            <option>V153“影魂异人”</option>
                            <option>V152“舰长维加”</option>
                            <option>V151“冒险岛电影节”</option>
                            <option>V150“龙脉—莫拉斯”</option>
                            <option>V149“龙脉”</option>
                            <option>V148“冬日城堡度假村”</option>
                            <option>V147“平衡喵”</option>
                            <option>V146“整装出击”</option>
                            <option>V145“埃尔露娜”</option>
                            <option>V144“超越进化”</option>
                            <option>V143“美人梦工场”</option>
                            <option>V142“有文化”</option>
                            <option>V141“废都塔”</option>
                            <option>V140“路西德”</option>
                            <option>V139“V5”</option>
                            <option>V138“异逝界”</option>
                            <option>V137“不能说的故事”</option>
                            <option>V136“水枪大作战”</option>
                            <option>V135“冒险英雄传说崛起”</option>
                            <option>V134“橡果侦探团”</option>
                        </select>
                    </div>
                </div>
                <div class="sltwo">
                    <h3>彩虹客服</h3>
                    <p>
                       24小时客服热线：95105222-8025 <br>
                       未开通95地区或海外用户请拨打：<br>
                       +86-21-50504728-8025 <br>
                       彩虹客服手机版：<a>点击下载</a><br>
                       心享受服务：<a>点击进入</a><br>
                       彩虹问答：<a>点击进入</a><br>
                    </p>
                    <ul>
                        <li class="q1"><em>防沉迷使用指南</em></li>
                        <li class="q2"><em>防沉迷信息补录</em></li>
                        <li class="q3"><em>实名信息补填入口</em></li>
                        <li class="q4"><em>举报不良信息</em></li>
                    </ul>
                </div>
                <div class="slthree">
                    <div>
                        <ul class="wwclick">
                                    <li>官方微信</li>
                                    <li>官方微博</li>
                        </ul>
                    </div>                    
                    <ul class="wwpic">
                        <li ><img src="image/ewm1.jpg"/></li>
                        <li><img src="image/ewm2.jpg"/></li>
                    </ul>
                </div>
            </div>
            <div class="shopcenter">
                <div class="scone">
                    <img src="image/pay_btn.png">
                    <div>
                        <span class="spannleft"><</span>
                        <span class="spanright">></span>
                    </div>
                    <div class="ulwrap">
                        <ul>
                            <li>
                               <img src="image/14488812413634.gif"> 
                               <div>
                                  <p>奥尔卡睡衣<br> 礼包
                                </p> 
                                </div> 
                            </li>
                            <li><img src="image/14689813199716.gif">
                                <div>
                                    <p>中式祥云_男<br>礼包</p>
                                </div> 
                            </li>
                            <li><img src="image/15064987196140.gif">
                                <div>
                                    <p>羽毛信使<br>礼包
                                    </p>
                                </div> 
                            </li>
                            <li><img src="image/15064987505068.gif">
                                <div>
                                    <p>胡子淑女_女<br>礼包</p>
                                </div> 
                            </li>
                            <li><img src="image/15385303847283.gif">
                                <div>
                                    <p>小小画家套装<br>闪耀宝物盒</p>
                                </div> 
                            </li>
                            <li><img src="image/15395689815660.gif">
                                <div>
                                    <p>新海豹白白_男<br>礼包</p>
                                </div> 
                            </li>
                            <li><img src="image/15405194391701.gif">
                                <div>
                                    <p>暴走熊熊套装_女<br>礼包</p>
                                </div> 
                            </li>
                            <li><img src="image/15409552956771.gif">
                                <div>
                                    <p>囚徒空间套装_男<br>皇家礼品袋</p>
                                </div> 
                            </li>
                            <li><img src="image/15419889679775.gif">
                                <div>
                                    <p>糖果天使套装_女<br>闪耀</p>
                                </div> 
                            </li>
                            <li> <img src="image/15429391384590.gif">
                                <div>
                                    <p>星夜之约套装_男<br>皇家礼品袋</p>
                                </div> 
                            </li>
                            <li>
                                <img src="image/14488812413634.gif"> 
                                <div>
                                   <p>奥尔卡睡衣<br> 礼包
                                 </p> 
                                 </div> 
                             </li>
                             <li><img src="image/14689813199716.gif">
                                 <div>
                                     <p>中式祥云_男<br>礼包</p>
                                 </div> 
                             </li>
                             <li><img src="image/15064987196140.gif">
                                 <div>
                                     <p>羽毛信使<br>礼包
                                     </p>
                                 </div> 
                             </li>
                             <li><img src="image/15064987505068.gif">
                                 <div>
                                     <p>胡子淑女_女<br>礼包</p>
                                 </div> 
                             </li>
                             <li><img src="image/15385303847283.gif">
                                 <div>
                                     <p>小小画家套装<br>闪耀宝物盒</p>
                                 </div> 
                             </li>
                             <li><img src="image/15395689815660.gif">
                                 <div>
                                     <p>新海豹白白_男<br>礼包</p>
                                 </div> 
                             </li>
                             <li><img src="image/15405194391701.gif">
                                 <div>
                                     <p>暴走熊熊套装_女<br>礼包</p>
                                 </div> 
                             </li>
                             <li><img src="image/15409552956771.gif">
                                 <div>
                                     <p>囚徒空间套装_男<br>皇家礼品袋</p>
                                 </div> 
                             </li>
                             <li><img src="image/15419889679775.gif">
                                 <div>
                                     <p>糖果天使套装_女<br>闪耀</p>
                                 </div> 
                             </li>
                             <li> <img src="image/15429391384590.gif">
                                 <div>
                                     <p>星夜之约套装_男<br>皇家礼品袋</p>
                                 </div> 
                             </li>
                        </ul>
                    </div>
                    
                </div>
                <div class="sctwo"></div>
                <div class="scthree">
                    <span class="scthreeleft"><</span>
                    <span class="scthreeright">></span>
                    <ul>
                        <li><img src="image/shoppingad1.jpg"/></li>
                        <li><img src="image/shoppingad2.gif"/></li>
                        <li><img src="image/shoppingad3.gif"/></li>
                        <li><img src="image/shoppingad4.gif"/></li>
                    </ul>
                </div>
                <div class="scfour">
                    <ul>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201811期 黃叶丹枫</p><em>2018/11/01</em></li>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201810期 喜迎国庆</p><em>2018/10/01</em></li>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201809期 重阳九月</p><em>2018/09/05</em></li>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201808期 八月未央</p><em>2018/08/05</em></li>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201807期 七月骄阳</p><em>2018/07/24</em></li>
                        <li><span>[玩家天地]</span><p>影魂异人深渊归来，一到五转技能抢先看</p><em>2018/06/15</em></li>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201806期 六月中夏</p><em>2018/06/04</em></li>
                        <li><span>[玩家天地]</span><p>官论冒险月刊201805期 你劳动了吗</p><em>2018/05/08</em></li>
                    </ul>
                </div>
                <div class="scfive">
                    <span><</span><span style="float:right">></span>
                    <div>
                            <ul>
                                    <li><img src="image/media1.png" alt="壁纸下载"></li>
                                    <li><img src="image/media2.png" alt="壁纸下载"></li>
                                </ul>
                    </div>
                    

                </div>
            </div>
            <div id="shopright">
                <div class="srone">
                    <ul>
                        <li class="one">
                            <em ></em>
                        </li>
                        <li class="two">
                            <em></em>
                        </li>
                        <li class="three">
                            <em></em>
                        </li>
                    </ul>
                </div>
                <div class="srtwo">
                    <ul>
                        <li>
                            <div><img src="image/15439810362227.png" alt=""></div>
                        <p>角色名：【天灰灰】</p>
                        <p>服务器：蓝蜗牛</p>
                        </li>
                    </ul>
                    <div>
                        <em></em>
                    </div>
                </div>
                <div class="srthree">
                    <div>
                        <div><img src="image/cooperation_icon.png" alt=""></div>
                        <ul>
                            <li>17173礼包</li>
                            <li>多玩礼包</li>
                            <li>新娘礼包</li>
                            <li>51PK礼包</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="meadi"></div>
    </div>
    <div id="footer">
        <ul>
            <li> <img src="image/footer_bg.png" alt=""></li>
            <li> <img src="image/footer_bg.png" alt=""></li>
        </ul>
    </div>
              <script>
                (function(){
                    var oul=document.querySelector("#footer ul");
                    var left=oul.offsetLeft;
                    var width=oul.offsetWidth;
                    var speed=2;
                    auto();
                    function auto(){
                        left=left-speed;
                        console.log(left);
                        if(left<=-width/2){
                            left=0;
                        }
                        oul.style.left=left+"px";
                        requestAnimationFrame(auto);
                    }
                })()
            </script> 
    </div>
    <script>
         var title=(function(){
                var timer1;
                var index3=0;
              var num3;
              var ospanth=document.querySelectorAll(".scthree span");
              var oliscthree=document.querySelectorAll(".scthree  li");
              var oulscthree=document.querySelector(".scthree ul");
              for(var i=0;i<ospanth.length;i++){
                  ospanth[i].a=i;
                  ospanth[i].onclick=function(){
                      num3=this.a;
                      if(num3==1){
                          index3++;
                          if(index3==oliscthree.length){
                              index3=0;
                          }
                      }
                      else{
                          index3--;
                          if(index3==-1)
                          {
                              index3=oliscthree.length-1;
                          }
                      }
                      oulscthree.style.marginLeft=-612*index3+"px";
                  }
              } 
                timer1=setInterval(function(){
                    index3++;
                    if(index3==oliscthree.length){
                              index3=0;
                          }
                    oulscthree.style.marginLeft=-612*index3+"px";
                },2000)
                oulscthree.onmouseover=function(){
                    clearInterval(timer1);
                }
                oulscthree.onmouseout=function(){
                    timer1=setInterval(function(){
                    index3++;
                    if(index3==oliscthree.length){
                              index3=0;
                          }
                    oulscthree.style.marginLeft=-612*index3+"px";
                },2000);
                }
            })()
           
        
        
       
        var num1;
              var index2=0;
              var oshoppings=document.querySelectorAll(".shopcenter span");
              var oshoppingul=document.querySelector(".ulwrap ul");
              var oshoppingli=document.querySelectorAll(".ulwrap ul li");
              for(var i=0;i<oshoppings.length;i++){
                  oshoppings[i].a=i;
                  oshoppings[i].onclick=function(){
                      num1=this.a;
                    if(num1==1){
                        index2++;
                        if(index2==oshoppingli.length/2){
                            index2=0;
                        }
                    }
                    else{
                        index2--;
                        if(index2==-1){
                            index2=oshoppingli.length/2-1;
                            console.log(index2);
                        }
                    }
                    oshoppingul.style.marginLeft=-138*index2+"px";
                  }
                 
              }

              var index1=0;
              var wwclick=document.querySelectorAll(".wwclick li");
              var wwclickui=document.querySelector(".slthree div ul");
              var wwpicli=document.querySelectorAll(".wwpic li");
              for(var i=0;i<wwclick.length;i++){
                  wwclick[i].a=i;
                  wwclick[i].onclick=function(){
                    wwclick[index1].className="";
                    wwpicli[index1].style.opacity="0";
                    index1=this.a;
                    if(index1==0)
                    {
                        wwclickui.className="wwclick";
                        wwpicli[index1].style.opacity="1";
                    }
                    else{
                        wwclickui.className="wwclick1";
                        wwpicli[index1].style.opacity="1";
                    }
                  }
              }  

              var index=0;
              var oli=document.querySelectorAll(".centertitle li");
              var oul=document.querySelectorAll(".centerinfo ul");
              for(var i=0;i<oli.length;i++){
                  oli[i].a=i;
                  oli[i].onclick=function(){
                    oli[index].className="";
                    oul[index].style.display="none";
                    index=this.a;
                    this.className="lion";
                    oul[index].style.display="block";
                  }
              }
            var onavbar=document.querySelector(".navbar");
            var onewslist=document.querySelector(".newslist");
            onavbar.onmouseover=function(){
            onewslist.style.marginTop=0;
            }
            onavbar.onmouseout=function(){
            onewslist.style.marginTop="-350px";
            }
            var odoen=document.querySelector(".down");
            var oi=odoen.getElementsByTagName("div")[0];
            oi.onmouseover=function(){
                this.style.transform="rotateY(360deg)";
            }

            var timer;
            var num; 
            var ind=0;
            var newsr=document.getElementById("newsright");
            var ospan=document.querySelectorAll("#newsright span");
            var oliimg=document.querySelectorAll("#newsright li");
            var ou=newsr.getElementsByTagName("ul")[0];
            console.log(ou);
            for(var i=0;i<ospan.length;i++){
                ospan[i].a=i;
                ospan[i].onclick=function(){
                    num=this.a;
                    if(num==1)
                    {
                        ind++;
                        if(ind==oliimg.length)
                        {
                            ind=0;
                        }
                    }
                    else{
                        ind--;
                        if(ind==-1)
                        {
                            ind=oliimg.length-1;
                        }
                    }
                  ou.style.marginLeft=-312*ind+"px"; 
                }
            }
             timer=setInterval(function(){
                ind++;
                if(ind==oliimg.length)
                        {
                            ind=0;
                        }
                ou.style.marginLeft=-312*ind+"px"; 

            },2000)

            ou.onmouseover=function(){
                clearInterval(timer);
            }
            
            ou.onmouseout=function(){
                timer=setInterval(function(){
                ind++;
                if(ind==oliimg.length)
                        {
                            ind=0;
                        }
                ou.style.marginLeft=-312*ind+"px"; 

            },2000);
            }
           
    </script>
</body>
</html>